<template>
  <a-drawer width="70%" closable placement="right" :visible="visible" @close="visible = false">
    <div slot="title" class="g-flex g-y-center">
      <div style="color: #000000; font-weight: bold">{{titleName}}</div>
    </div>
    <a-spin :spinning="spinning" class="table-padding-style" style="padding-top: 0">
      <!-- :footer="handleFooterShow"  -->
      <!-- :scroll="{x:1000}" -->
      <a-table
        :scroll="this.row_record.type != 3?{ x: 1000 }:{}"
        :columns="this.row_record.type != 3?innerColumns:innerColumnsType3"
        :data-source="dataList"
        :rowKey="(record, index) => index"
        :pagination="pagination"
        :bordered="true"
        @change="tableHandleChange"
        :loading="tableLoading"
      >
        <!--序号-->
        <!-- <template slot="footer" slot-scope="text,record,index">
          <span>合计</span>
        </template> -->
      </a-table>
    </a-spin>
  </a-drawer>
</template>

<script>
import {
  noChargeItem,
  getFinanceReportImgList,
  getReportFormDeptList,
  getReportFormReportList,
  paymentMethodReportsDetail,
} from '@/api/modular/main/customer/cashier'

export default {
  props: {
    row_record: {
      type: Object,
      default: () => {
        {
        }
      },
    },
  },
  data() {
    return {
      tableLoading:false,
      titleName:'报表明细',
      pagination: {
        pageNum: 1,
        pageSize: 20,
        current: 1,
        total: 20,
      },
      spinning: true,
      visible: false,
      form: this.$form.createForm(this),
      innerColumns: [
        {
          title: '科室',
          align: 'center',
          dataIndex: 'execDeptName',
          width: 120,
          ellipsis: true,
          customRender: (text, record) => {
            // text 当前行的值，record 当前行数据
            return {
              children: text,
              attrs: {
                rowSpan: record.execDeptNameRowSpan,
              },
            }
          },
        },
        {
          title: '顾客卡号',
          align: 'center',
          dataIndex: 'cardNo',
          width: 150,
          ellipsis: true,
          customRender: (text, record) => {
            // text 当前行的值，record 当前行数据
            return {
              children: text,
              attrs: {
                rowSpan: record.cardNoRowSpan,
              },
            }
          },
        },
        {
          title: '顾客姓名',
          align: 'center',
          dataIndex: 'name',
          width: 120,
          ellipsis: true,
          customRender: (text, record) => {
            // text 当前行的值，record 当前行数据
            return {
              children: text,
              attrs: {
                rowSpan: record.nameRowSpan,
              },
            }
          },
        },
        {
          title: '一级科室',
          align: 'center',
          dataIndex: 'oneStepName',
          width: 180,
          ellipsis: true,
          customRender: (text, record) => {
            // text 当前行的值，record 当前行数据
            return {
              children: text,
              attrs: {
                rowSpan: record.oneStepNameRowSpan,
              },
            }
          },
        },
        {
          title: '二级科室',
          align: 'center',
          dataIndex: 'twoStepName',
          width: 180,
          ellipsis: true,
          customRender: (text, record) => {
            // text 当前行的值，record 当前行数据
            return {
              children: text,
              attrs: {
                rowSpan: record.twoStepNameRowSpan,
              },
            }
          },
        },
        {
          title: '项目',
          align: 'center',
          dataIndex: 'threeStepName',
          width: 180,
          ellipsis: true,
          customRender: (text, record) => {
            // text 当前行的值，record 当前行数据
            return {
              children: text,
              attrs: {
                rowSpan: record.threeStepNameRowSpan,
              },
            }
          },
        },
        {
          title: '类型',
          align: 'center',
          dataIndex: 'rpPurposeName',
          width: 120,
          ellipsis: true,
          customRender: (text, record) => {
            // text 当前行的值，record 当前行数据
            return {
              children: text,
              attrs: {
                rowSpan: record.rpPurposeNameRowSpan,
              },
            }
          },
        },
        {
          title: '总额',
          align: 'center',
          dataIndex: 'resultSaleAmt',
          width: 120,
          ellipsis: true,
          customRender: (text, record) => {
            // text 当前行的值，record 当前行数据
            return {
              children: text,
              attrs: {
                rowSpan: record.resultSaleAmtRowSpan,
              },
            }
          },
        },
        {
          title: '现金',
          align: 'center',
          dataIndex: 'xj',
          width: 120,
          ellipsis: true,
          customRender: (text, record) => {
            // text 当前行的值，record 当前行数据
            return {
              children: text,
              attrs: {
                rowSpan: record.xjRowSpan,
              },
            }
          },
        },
        {
          title: '刷卡',
          align: 'center',
          dataIndex: 'sk',
          width: 120,
          ellipsis: true,
          customRender: (text, record) => {
            // text 当前行的值，record 当前行数据
            return {
              children: text,
              attrs: {
                rowSpan: record.skRowSpan,
              },
            }
          },
        },
        {
          title: '转账',
          align: 'center',
          dataIndex: 'zz',
          width: 120,
          ellipsis: true,
          customRender: (text, record) => {
            // text 当前行的值，record 当前行数据
            return {
              children: text,
              attrs: {
                rowSpan: record.zzRowSpan,
              },
            }
          },
        },
      ],

      innerColumnsType3: [ 
        {
          title: '顾客卡号',
          align: 'center',
          dataIndex: 'cardNo',
          width: 150,
          ellipsis: true, 
        },
        {
          title: '顾客姓名',
          align: 'center',
          dataIndex: 'clientName',
          width: 100,
          ellipsis: true, 
        },
        {
          title: '收支类型',
          align: 'center',
          dataIndex: 'rpMode',
          width: 120,
          ellipsis: true, 
        },
        {
          title: '项目类型',
          align: 'center',
          dataIndex: 'rpPurposeId',
          width: 120,
          ellipsis: true, 
        },
        {
          title: '金额',
          align: 'center',
          dataIndex: 'rpAmt',
          width: 120,
          ellipsis: true, 
        },
      ],

      lookImgVisible: false,

      dataList: [],
    }
  },

  methods: {
    // 合并
    rowSpan(key) {
      let arr = this.dataList
        .reduce((result, item) => {
          if (result.indexOf(item[key]) < 0) {
            result.push(item[key])
          }
          return result
        }, [])
        .reduce((result, keys) => {
          const children = this.dataList.filter((item) => item[key] === keys)
          result = result.concat(
            children.map((item, index) => ({
              ...item,
              [`${key}RowSpan`]: index === 0 ? children.length : 0,
            }))
          )
          return result
        }, [])
      this.dataList = arr
    },
    callback(key) {
      console.log(key)
    },

    handleCancel() {
      this.lookImgVisible = false
    },
    // 查看图片
    lookImg() {
      this.lookImgVisible = true
    },
    // 进入页面调
    show() {
      this.visible = true
      this.form.resetFields()

      this.$nextTick(() => {
        this.spinning = true
        console.log('行数据', this.row_record)
        const orderId = this.row_record.orderId
        // noChargeItem({ orderId }).then(res => {
        this.spinning = false
        //   console.log('项目详情', res.data)
        // })

        this.pagination.pageNum = 1
        this.pagination.pageSize = 20
        this.pagination.current = 1
        this.tableLoading = true

        this.listFunc()
      })
    },
    // 请求
    listFunc() {
      // 明细
      let sendData = {
        begin: this.row_record.days + ' 00:00:00',
        end: this.row_record.days + ' 23:59:59',
        execDept: this.row_record.execDept
      }
      let sendData2 = {
        pageNum: this.pagination.pageNum,
        pageSize: this.pagination.pageSize,
      }
      let sendData3 = {
        start: this.row_record.days + ' 00:00:00',
        end: this.row_record.days + ' 23:59:59',
        pageNum: this.pagination.pageNum,
        pageSize: this.pagination.pageSize,
      }

      // 日结总表
      if (this.row_record.type == 1) {
        this.titleName = '总报明细'
        getReportFormReportList(sendData, sendData2).then((result) => {
          this.dataList = [...result.rows]
          this.rowSpan('execDeptName')
          this.pagination.total = Number(result.total)
          this.tableLoading = false
        })
      } else if (this.row_record.type == 2) {
        // 项目科室
        this.titleName = '科室明细'
        getReportFormDeptList(sendData, sendData2).then((result) => {
          this.dataList = [...result.rows]
          this.rowSpan('execDeptName')
          this.pagination.total = Number(result.total)
          this.tableLoading = false
        })
      } else if (this.row_record.type == 3) {
        // 支付方式
        this.titleName = '支付方式明细'
        paymentMethodReportsDetail(sendData3).then((result) => {
          this.dataList = [...result.rows]
          this.rowSpan('execDeptName')
          this.pagination.total = Number(result.total)
          this.tableLoading = false
        })
      }
    },

    // 点击分页
    tableHandleChange(pagination) {
      console.log(pagination)
      this.pagination.pageNum = pagination.current
      this.pagination.pageSize = pagination.pageSize
      this.pagination.current = pagination.current
      this.listFunc()
    },

    findFunc(arr, type, typeNum) {
      let newData = arr.find((item) => {
        return item[`${type}`] == typeNum
      })
      if (newData != undefined) {
        return newData.url
      } else {
        return ''
      }
    },
  },
}
</script>

<style lang="less" scoped>
.ant-drawer-body {
  padding: 24px 0;
}
// .table-padding-style {
//   padding: 50px 24px;
//   border-bottom: 1px solid #e8e8e8;
// }
/deep/ .ant-table-thead > tr > th,
/deep/ .ant-table-tbody > tr > td {
  padding: 10px 16px !important;
}
/deep/ .ant-table-tbody > tr:last-child > td {
  // border-bottom: 0 !important;
}
/deep/ .ant-tabs-card-content {
  img {
    width: 100% !important;
  }
}
</style>

